<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width:300px;
            height:300px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
<div class = "box">
    <p>当前页面同时按下<span class = "length"></span></p>
    <ul class = "list">

    </ul>
</div>
<script>
    /*
    * 鼠标事件：
    *
    * 键盘事件：对document进行操作
    *   键盘按下的时候按的是什么键
    *
    * */
    let box = document.querySelector(".box")

    //document.onkeydown = function (e){
    //    if(e.key.toLowerCase() === "f12"){ //只要按下的键是f12，就阻止默认行为（护士大小写）
    //        e.preventDefault()
    //    }

        //console.log("键盘被按下")
    //    console.log(e.key)
    //}


    //用一个map表示每一个键的状态
    //let map = {
    //    "a":false,
    //    "b":false,
        //一直写到z，但是这样很麻烦
    //}

    //所以应该这样写
    let map = {}

    //循环为charcode为97到122的值所对应的字母绑定false
    for(let i = 97;i < 123;i++){
        map[String.fromCharCode(i)] = false
    }
    console.log(map)

    document.onkeydown = function (e){
        const key = e.key.toLowerCase()
        map[key] = true
        render()
        move(key)
    }

    document.onkeyup = function (e){
        const key = e.key.toLowerCase()
        map[key] = false
        render()
        move(key)
    }

    //用一个render函数包裹 监测我们具体按了哪些键
    function render(){
        let count = 0
        let list = []

        //遍历map 查询有多少个键是为true的
        //怎样遍历一个对象 用for in的方法
        for(const mapKey in map){
            //console.log(mapKey)
            if(map[mapKey]){
                count++
                list.push(mapKey) //将值添加进list数组
            }
        }

        //给类名为length的元素渲染html
        document.querySelector(".length").innerHTML = count

        //根据list数组渲染ul标签，list里面有多少个元素，ul里面就添加几个li
        let ul = document.querySelector(".list")
        ul.innerHTML = "" //渲染之前先清空ul当中的内容
        list.forEach(key => {
            let li = document.createElement("li")
            li.innerHTML = key
            ul.appendChild(li)
        })
    }


    //按键对应行为映射表
    let action = {
        "w":"向前",
        "s":"向后",
        "a":"向左",
        "d":"向右",
        " ":"跳跃",
    }

    //根据wsad上下左右
    function move(i){
        /*if(map["w"]){ //这里是通过访问之前52行获得的map对象中的属性，来获得按下的是什么键
            console.log("向前走")
        }
        if(map["s"]){
            console.log("向后退")
        }
        if(map["a"]){
            console.log("向左")
        }
        if(map["d"]){
            console.log("向右")
        }*/
        console.log(action[i])
    }

    //记录空格键按下多久
    let date = null
    let keyDown = false
    document.onkeydown = function (e){
        if(keyDown) return //节流思想
        keyDown = true
        if(e.key === " "){
            console.log("开始")
            date = new Date()
        }
    }
    document.onkeyup = function (e){
        if(e.key === " "){
            keyDown = false
            console.log("结束")
            console.log((new Date() - date)/1000 + "s")
        }
    }



</script>
</body>
</html>